<template>
  <div class="slider">
    <el-menu
      :default-active="onRoutes"
      class="el-menu-vertical"
      :collapse="collapse"
      text-color="#bfcbd9"
      active-text-color="#20a0ff"
      background-color="#324157"
      unique-opened
      router
    >
      <template v-for="item in items">
        <template v-if="item.subs">
          <el-submenu :index="item.index" :key="item.index">
            <template slot="title">
              <i :class="item.icon"></i>
              <span slot="title">{{ item.title }}</span>
            </template>
            <template v-for="sub in item.subs">
              <el-submenu v-if="sub.subs" :index="sub.index" :key="sub.index">
                <template slot="title">
                  <i :class="sub.icon"></i>
                  <span slot="title">{{ sub.title }}</span>
                  <template v-for="three in sub.subs">
                    <el-menu-item :key="three.index" :index="three.index">
                      <i :class="three.icon"></i>
                      <span slot="title">{{ three.title }}</span>
                    </el-menu-item>
                  </template>
                </template>
              </el-submenu>
              <el-menu-item v-else :index="sub.index" :key="sub.index">
                <i :class="sub.icon"></i>
                <span slot="title">{{ sub.title }}</span>
              </el-menu-item>
            </template>
          </el-submenu>
        </template>
        <template v-else>
          <el-menu-item :index="item.index" :key="item.index">
            <i :class="item.icon"></i>
            <span slot="title">{{ item.title }}</span>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script>
import bus from "./bus";
export default {
  data() {
    return {
      collapse: true,
      items: [
        {
          index: "dashboard",
          icon: "el-icon-house",
          title: "首页",
        },
        {
          index: "app",
          icon: "el-icon-suitcase",
          title: "应用管理",
        },
        {
          index: "client",
          icon: "el-icon-monitor",
          title: "客户端管理",
        },
        {
          index: "task-all",
          icon: "el-icon-document-checked",
          title: "任务管理",
          subs: [
            {
              index: "task",
              icon: "",
              title: "任务",
            },
            {
              index: "task_log",
              icon: "",
              title: "任务日志",
            },
          ],
        },
      ],
    };
  },
  methods: {
   
  },
  computed:{
     onRoutes() {
      console.log("onRoutes");
      var active = this.$route.path.replace("/", "");
      console.log(active);
      return active;
    }
  },
  created() {
    bus.$on("collapse", (msg) => {
      this.collapse = msg;
      bus.$emit("collapse-content", msg);
    });
  },
};
</script>

<style scoped>
.slider {
  display: block;
  position: absolute;
  left: 0;
  top: 70px;
  bottom: 0;
  overflow-y: scroll;
}
.slider::-webkit-scrollbar {
  width: 0;
}
.el-menu-vertical:not(.el-menu--collapse) {
  width: 250px;
  min-height: 400px;
}
.slider > ul {
  height: 100%;
}
</style>
